<template>
	<view class="content pb-150">
		<div class="pos-rel">
			<!-- 内容 -->
			<div class="main">
				<div v-if="userInfo.userType === '02'">
					<div v-for="(item, index) in transList" :key="index" class="pay-main mb-20 "
						@click="changeRadio(index)">
						<div class="pay-box flex align-center pt-30 pb-30 fontS30 pl-20">
							<div class="">{{ item.title }}</div>
							<div class="iconfont icon-danxuankuang ml-auto color-d fontS40 pr-20"
								:class="radioAct === index ? 'icon-xuanzhong color-green' : ''"></div>
						</div>
					</div>
				</div>


				<div class="bg-fff bor-r16 p-30 pb-40 flex flex-direction justify-center align-center">
					<div class="font-500 ">上传银行付款凭证</div>
					<div class="mt-10 fontS28 color-6d">请上传此订单对应的银行付款证明</div>

					<div class="uploadBox mt-20" v-if="postForm.bankUrl">
						<image class="img" :src="baseUrl + postForm.bankUrl" mode="aspectFill"></image>
					</div>
					<div v-else class="uploadBox mt-20  flex flex-direction justify-center align-center"
						@click="uploadSent('bank')">
						<image class="img-50" src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/图片上传.png"
							mode="aspectFill" />
						<div class="mt-20 color-6d">上传凭证</div>
					</div>


				</div>

				<div class="bg-fff bor-r16 p-30 pb-40 mt-20 flex flex-direction justify-center align-center"
					v-if="userInfo.userType === '02' && radioAct === 0">
					<div class="font-500 ">企业授权书</div>
					<div class="mt-10 fontS28 color-6d">请上传企业授权个人付款授权书</div>

					<div class="uploadBox mt-20" v-if="postForm.companyUrl">
						<image class="img" :src="baseUrl + postForm.companyUrl" mode="aspectFill"></image>
					</div>
					<div v-else class="uploadBox mt-20  flex flex-direction justify-center align-center"
						@click="uploadSent('company')">
						<image class="img-50" src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/图片上传.png"
							mode="aspectFill" />
						<div class="mt-20 color-6d">上传凭证</div>
					</div>


				</div>
				<div class="bg-fff bor-r16 p-30 mt-20 ">
					<div class="font-500 ">备注</div>
					<textarea class="mt-10" placeholder="请输入备注文字" v-model="postForm.remark"></textarea>



				</div>
			</div>



			<div class="bottom">
				<div class="bottomBtn fontS26" @click="toOrder">提 交</div>

			</div>
		</div>


	</view>
</template>

<script>
const ossUploadFile = require("@/utils/ossupload/upload").ossUploadFile;
import {
	creatOrder, payApp
} from "@/api/order";
import {
	findServePersonalDetailApp,
	findServeDetailApp,
} from "@/api/serve";

export default {

	data() {
		return {

			baseUrl: getApp().globalData.baseUrl,
			transList: [
				{
					title: '个人对公转账支付',
				},
				{
					title: '企业对公转账支付',
				}
			],
			radioAct: 0,
			postForm: {
				bankUrl: '',
				companyUrl: '',
				remark: ''
			},
			orderId: '',
			tutorId: '',
			num: null,
			serviceDetail: null,
			remark: '',



		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},

	async onLoad(option) {
		this.serveId = option.serveId
		await this.getServiceDetail(option.serveId)
		if (option.tutorId) {
			this.tutorId = option.tutorId

		}
		if (option.num) this.num = option.num

		this.orderId = option.orderId;



	},


	methods: {
		// 个人端详情
		async getServiceDetail(id) {
			let apiUrl = this.userInfo.userType === '02' ? findServePersonalDetailApp : findServeDetailApp
			const {
				data
			} = await apiUrl(id);
			this.serviceDetail = data


		},
		async toOrder() {
			if (this.userInfo.userType === '03') {
				if (!this.postForm.bankUrl) {
					uni.showToast({ title: '请先上传支付凭证', icon: 'none' })
					return false;
				}

			}
			if (this.userInfo.userType === '02') {

				if (!this.postForm.bankUrl) {
					uni.showToast({ title: '请先上传支付凭证', icon: 'none' })
					return false;
				}
				if (this.radioAct === 0) {
					if (!this.postForm.companyUrl) {
						uni.showToast({ title: '请先上传企业授权书', icon: 'none' })
						return false;
					}
				}

			}
			// await this.creatOrder()
			await this.pay()
			uni.redirectTo({
				url: `/pages/order/success?orderId=${this.orderId}`
			})
		},
		async creatOrder() {
			let params = {
				userType: this.userInfo.userType,
				serveId: this.serviceDetail.serveId,
				payRemark: this.postForm.remark,
				attrId: this.serviceDetail.priceType !== 'unfix' && this.serviceDetail.priceType !== 'tutor' ? this.serviceDetail.attributeDtos[0].attrId : '',
				serveNum: this.num || 1,
				remark: this.postForm.remark,
				payChannel: 3,
				tutorId: this.tutorId,
				channel: 1,
				payPeriod: '',
			}
			const { data } = await creatOrder(params)
			this.orderId = data
		},
		async pay() {
			let paramPay = {
				openId: this.userInfo.openId,
				orderId: this.orderId,
				payMethod: '3',
				payPowerUrl: this.postForm.companyUrl,
				payRemark: '',
				payVoucherUrl: this.postForm.bankUrl,
				wxPayType: '1',

			}
			const { data } = await payApp(paramPay)
		},
		changeRadio(index) {
			this.radioAct = index
		},
		async uploadSent(type) {
			let _this = this;
			uni.chooseImage({
				count: 1, // 默认选择一个文件
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: (res) => {

					console.log(res.tempFilePaths)
					this.uploadImages(res.tempFilePaths[0], type)
				},
				fail: (err) => {
					console.error('选择文件失败', err);
				}
			});
		},
		async uploadImages(path, type) {
			let data = { type: 11 };
			data.filePath = path
			ossUploadFile.ossUploadFile(data, async (res) => {
				if (type === 'bank') {
					this.postForm.bankUrl = res.fileName
				} else {
					this.postForm.companyUrl = res.fileName
				}



			}, async (error) => {
				console.log(error)

			})
		},

	},

	onReachBottom() {
	},
	onPullDownRefresh() {
	},
};
</script>

<style lang="less" scoped>
@import url(index.less);

textarea {
	width: 100%;
	height: 200upx;
	line-height: 40upx;
	font-size: 28upx;
}

.uploadBox {
	width: 80%;
	height: 250upx;
	border: 1px dashed #d6d6d6;
	border-radius: 8upx;

	.img {
		padding: 10upx;
		width: 100%;
		height: 100%;
	}
}
</style>